<template>
  <div>
    <v-breadcrumbs
        :items="items"
        divider="-"
    ></v-breadcrumbs>
    <v-card style="position: relative;">
      <v-card-title>
        任务列表
      </v-card-title>
      <v-card-subtitle>
        task list
      </v-card-subtitle>

      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
              fab
              small
              color="blue darken-2"
              v-bind="attrs"
              v-on="on"
              style="position: absolute;top: -20px;right: -20px"
              @click="newTask"
          >
            <v-icon color="white">mdi-plus</v-icon>
          </v-btn>
        </template>
        <span>创建任务</span>
      </v-tooltip>


      <v-simple-table>
        <template v-slot:default>
          <thead>
          <tr>
            <th class="text-left">
              任务名称
            </th>
            <th class="text-left">
              程序目录
            </th>
            <th class="text-left">
              运行状态
            </th>
            <th class="text-left" style="width: 30%;min-width: 250px">
              操作
            </th>
          </tr>
          </thead>
          <tbody>
          <tr
              v-for="item in tables"
              :key="item.name"
          >
            <td>{{ item.name }}</td>
            <td>{{ item.catalogue }}</td>
            <td>
              <v-chip
                  v-if="item.status"
                  class="ma-2"
                  color="primary"
                  label
                  text-color="white"
                  small
              >
                Running
              </v-chip>
              <v-chip
                  v-else
                  class="ma-2"
                  color="error"
                  label
                  text-color="white"
                  small
              >
                Stop
              </v-chip>
            </td>
            <td>
              <v-btn
                  v-if="item.status"
                  small
              >
                停止
              </v-btn>
              <v-btn
                  v-else
                  small
              >
                启动
              </v-btn>
              <v-btn
                  style="margin-left: 20px"
                  small
                  color="primary"
              >
                编辑
              </v-btn>
              <v-btn
                  style="margin-left: 20px"
                  small
                  color="error"
              >
                删除
              </v-btn>
            </td>
          </tr>
          </tbody>
        </template>
      </v-simple-table>
    </v-card>


    <v-dialog
        v-model="TaskDialogStatus"
        persistent
        max-width="1000"
    >
      <v-card>
        <v-card-title class="text-h5">
          创建任务
        </v-card-title>
        <v-card-text>
          Create task
        </v-card-text>

        <!--        文件列表-->
        <v-row no-gutters justify="center">
          <v-col cols="10">
            <div style="margin-bottom: 20px">
              <div>
                <div style="display: flex;align-items: center">
                  <span style="width: 95px">
                  程序名称：
                </span>
                  <v-text-field label="请输入程序名称"></v-text-field>
                </div>
                <div style="display: flex;align-items: center">
                  <span style="width: 95px">
                  程序路径：
                </span>
                  <v-text-field label="请输入程序绝对路径"></v-text-field>
                </div>
              </div>
            </div>

            <!--            文件目录-->
            <!--            <v-treeview
                            hoverable
                            activatable
                            open-on-click
                            transition
                            :open.sync="open"
                            :active.sync="active"
                            :load-children="fetchFileList"
                            :items="fileList"
                            @update:active="clickBtn"
                        ></v-treeview>-->
          </v-col>
        </v-row>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
              color="green darken-1"
              text
              @click="TaskDialogStatus = false"
          >
            取消
          </v-btn>
          <v-btn
              color="green darken-1"
              text
              @click="TaskDialogStatus = false"
          >
            创建
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

  </div>
</template>

<script>
export default {
  name: "TaskManagement",
  data() {
    return {
      items: [
        {
          text: '首页',
          disabled: false,
          href: '/#/admin/home',
        },
        {
          text: '任务管理',
          disabled: true,
          href: '/#/admin/task_management',
        }
      ],
      tables: [
        {
          name: '任务名称',
          catalogue: 159,
          status: true
        },
        {
          name: '任务名称1',
          catalogue: 159,
          status: false
        }

      ],
      TaskDialogStatus: false,
      lists: [],
      open: [],
      active: []
    }
  },
  computed: {
    fileList() {
      return [
        {
          id: 1,
          name: '/',
          children: this.lists
        }
      ]
    }
  },
  methods: {
    newTask() {
      this.TaskDialogStatus = true
    },
    fetchFileList(item) {
      console.log(item.name)
      console.log('open', this.open)
      this.lists.push({id: 2, name: 'root'})
    },
    clickBtn(res) {
      console.log(res)
    }
  }
}
</script>

<style scoped>

</style>